<template>
    <editor
    class="read-only-rich"
    disabled
    v-model="contentValue"
    :init="init"/>
</template>

<script>
//tinyMCE
 /* Import TinyMCE */
 import tinymce from 'tinymce';

 /* Default icons are required for TinyMCE 5.3 or above */
 import 'tinymce/icons/default';

 /* A theme is also required */
 import 'tinymce/themes/silver';

 /* Import the skin */
 import 'tinymce/skins/ui/oxide/skin.css';

/* Import plugins */
 import 'tinymce/plugins/autoresize';


import Editor from '@tinymce/tinymce-vue'

const init = {
    skin: false,
    plugins: 'autoresize',
    autoresize_bottom_margin: 0,
    max_height: 200,
    language: 'zh-Hans',
    language_url: `/static/zh-Hans.js`,
    menubar: false,
    contextmenu: false,
    toolbar: '',
    branding: false,
    statusbar: false,
    sidebar_show: '',
    nowrap : true,
    content_css: '/static/ReadonlyRich.css',
    }

export default {
    name: 'ReadonlyRich',
    props: ['content'],
    data() {
        return {
            contentValue: ""
        }
    },
    components: {
        'editor':Editor
    },
    computed: {
        init() {
            return init
        }
    },
    mounted() {
        tinymce.init({
            readonly: 1,
            contextmenu: false,
            toolbar: '',
            statusbar: false,
            sidebar_show: '',
            nowrap : true,
            content_css: '/ReadonlyRich.css',
            plugins: 'autoresize',
            autoresize_bottom_margin: 50,
            max_height: 200,
        }),
        this.contentValue = this.content
    },
}

</script>

<style lang="scss">

</style>